<template>
  <el-card class="building-card" shadow="hover">
    <template #header>
      <div class="card-header">
        <span class="building-title">房屋信息</span>
        <el-tag v-if="buildingData.status === '正常'" type="success">正常</el-tag>
        <el-tag v-else type="danger">{{ buildingData.status }}</el-tag>
      </div>
    </template>

    <div class="building-info">
      <div class="info-row">
        <span class="label">楼宇名称：</span>
        <span class="value">{{ buildingData.name || '-' }}</span>
      </div>
      <div class="info-row">
        <span class="label">楼宇编号：</span>
        <span class="value">{{ buildingData.buildingNo || '-' }}</span>
      </div>
      <div class="info-row">
        <span class="label">总楼层数：</span>
        <span class="value">{{ buildingData.totalFloors || '-' }}层</span>
      </div>
      <div class="info-row">
        <span class="label">单元数：</span>
        <span class="value">{{ buildingData.unitCount || '-' }}个单元</span>
      </div>
      <div class="info-row">
        <span class="label">建筑结构：</span>
        <span class="value">{{ buildingData.buildingStructure || '-' }}</span>
      </div>
      <div class="info-row">
        <span class="label">楼宇类型：</span>
        <span class="value">{{ buildingData.buildingType || '-' }}</span>
      </div>
      <div class="info-row">
        <span class="label">楼宇用途：</span>
        <span class="value">{{ buildingData.buildingPurpose || '-' }}</span>
      </div>
      <div class="info-row">
        <span class="label">建成日期：</span>
        <span class="value">{{ formatDate(buildingData.builtDate) || '-' }}</span>
      </div>
      <div class="info-row">
        <span class="label">建筑面积：</span>
        <span class="value">{{ buildingData.buildingArea || '-' }}㎡</span>
      </div>
      <div class="info-row">
        <span class="label">使用面积：</span>
        <span class="value">{{ buildingData.usableArea || '-' }}㎡</span>
      </div>
      <div class="info-row">
        <span class="label">房间编号规则：</span>
        <span class="value">{{ buildingData.roomNumberRule || '-' }}</span>
      </div>
      <div class="info-row" v-if="buildingData.description">
        <span class="label">描述：</span>
        <span class="value description-text">{{ buildingData.description }}</span>
      </div>
    </div>
  </el-card>
</template>

<script setup name="BuildingCard">
import { getCurrentInstance } from 'vue'

const { proxy } = getCurrentInstance()

// 定义props
const props = defineProps({
  buildingData: {
    type: Object,
    default: () => ({})
  }
})

// 时间格式化
const parseTime = (time) => {
  if (!time) return '-'
  try {
    return proxy.$parseTime(time, '{y}-{m}-{d}')
  } catch (e) {
    return time
  }
}

const formatDate = (dateString) => {
  if (!dateString) return '-'
  try {
    const date = new Date(dateString)
    if (isNaN(date.getTime())) return dateString

    const year = date.getFullYear()
    const month = String(date.getMonth() + 1).padStart(2, '0')
    const day = String(date.getDate()).padStart(2, '0')

    return `${year}-${month}-${day}`
  } catch (e) {
    console.error('日期格式化错误:', error)
    return dateString
  }
}
</script>

<style scoped lang="scss">
.building-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #e4e7ed;

  :deep(.el-card__header) {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 12px 20px;

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .building-title {
        color: white;
        font-size: 16px;
        font-weight: 600;
      }
    }
  }

  :deep(.el-card__body) {
    padding: 20px;
  }
}

.building-info {
  .info-row {
    display: flex;
    margin-bottom: 12px;
    line-height: 1.5;

    &:last-child {
      margin-bottom: 0;
    }

    .label {
      width: 120px;
      font-weight: 500;
      color: #606266;
      flex-shrink: 0;
    }

    .value {
      flex: 1;
      color: #303133;

      &.description-text {
        line-height: 1.6;
        word-break: break-all;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .building-info {
    .info-row {
      flex-direction: column;

      .label {
        width: 100%;
        margin-bottom: 4px;
      }
    }
  }
}
</style>